<template>
  <div>
    <el-form labelWidth="140px" v-loading="loading2">
      <el-form-item label="所属指标" class="is-required">
        <el-select v-model="xmData.propertyid" placeholder="请选择" style="width:49%" @change="getSX2(xmData.propertyid)"
          v-validate="'required'" name="所属指标"
        >
          <el-option
            v-for="item in sxSelect"
            :key="item.hash.pname"
            :label="item.hash.pname"
            :value="item.hash.id"
          >
          </el-option>
        </el-select>
        <div class="el-form-item__error">{{ errors.first('所属指标') }}</div>
        <el-select v-model="xmData.nid" placeholder="请选择" style="width:49%" @change="getSX3(xmData.nid)"
          v-validate="'required'" name="所属指标"
        >
          <el-option
            v-for="item in sx2Select"
            :key="item.hash.nname"
            :label="item.hash.nname"
            :value="item.hash.id"
          >
          </el-option>
        </el-select>
        <div class="el-form-item__error">{{ errors.first('所属指标') }}</div>
      </el-form-item>
      <el-form-item label="所属类别" class="is-required">
        <el-select v-model="xmData.pclassify" placeholder="请选择" style="width:100%" v-validate="'required'"
          name="所属类别"
        >
          <el-option
            v-for="item in lbSelect"
            :key="item.hash.id"
            :label="item.hash.typename"
            :value="item.hash.id"
          >
          </el-option>
        </el-select>
        <div class="el-form-item__error">{{ errors.first('所属类别') }}</div>
      </el-form-item>
      <el-form-item label="项目名称" class="is-required">
        <el-input v-model="xmData.pname" placeholder="请输入内容" v-validate="'required'" name="项目名称"></el-input>
        <div class="el-form-item__error">{{ errors.first('项目名称') }}</div>
      </el-form-item>
      <el-form-item label="项目概况" class="is-required">
        <el-input v-validate="'required'" name="项目概况"
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          v-model="xmData.ptext"
        >
        </el-input>
        <div class="el-form-item__error">{{ errors.first('项目概况') }}</div>
      </el-form-item>
      <el-form-item label="牵头部门" class="is-required">
        <el-select v-model="xmData.assessunit" placeholder="牵头部门" style="width:100%" disabled>
          <el-option
            v-for="item in qtSelect"
            :key="item.hash.orgid"
            :label="item.hash.orgname"
            :value="item.hash.orgid"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="责任单位" class="is-required">
        <el-select v-model="xmData.orgid" placeholder="请选择" style="width:100%" v-validate="'required'"
          name="责任单位"
        >
          <el-option
            v-for="item in zrSelect"
            :key="item.hash.orgid"
            :label="item.hash.orgname"
            :value="item.hash.orgid"
          >
          </el-option>
        </el-select>
        <div class="el-form-item__error">{{ errors.first('责任单位') }}</div>
      </el-form-item>
      <el-form-item label="计划时间" class="is-required">
        <el-date-picker
          style="width:100%"
          v-model="xmData.planDate"
          type="daterange"
          rangeSeparator="至"
          startPlaceholder="开始日期"
          endPlaceholder="结束日期"
          valueFormat="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="项目级别" class="is-required">
        <el-radio-group v-model="xmData.pgrade">
          <el-radio label="区镇项目">区镇项目</el-radio>
          <el-radio label="市级项目">市级项目</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="资金来源" class="is-required">
        <el-radio-group v-model="xmData.source">
          <el-radio label="市级财政">市级财政</el-radio>
          <el-radio label="区级财政">区级财政</el-radio>
          <el-radio label="自筹(其它)">自筹(其它)</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="金额(万元)" class="is-required">
        <el-input v-model="xmData.amount" placeholder="上限999" type="number" v-validate="'required'"
          name="金额"
        ></el-input>
        <div class="el-form-item__error">{{ errors.first('金额') }}</div>
      </el-form-item>

      <el-form-item label="联系人" class="is-required">
        <el-input v-model="xmData.linkman" placeholder="请输入" v-validate="'required'" name="联系人"></el-input>
        <div class="el-form-item__error">{{ errors.first('联系人') }}</div>
      </el-form-item>
      <el-form-item label="联系方式" class="is-required">
        <el-input v-model="xmData.tel" placeholder="请输入" v-validate="'required'" name="联系方式"></el-input>
        <div class="el-form-item__error">{{ errors.first('联系方式') }}</div>
      </el-form-item>
      <el-form-item label="地址" class="is-required">
        <el-input v-model="localPointname" placeholder="请输入" style="width:85%;margin-right:0.5%"></el-input><el-button type="primary" @click="innerVisible1=true">查看</el-button>
      </el-form-item>
      <el-form-item label="坐标(经纬度)" class="is-required">
        <el-input v-model="point" placeholder="地图" readonly></el-input>
      </el-form-item>
    </el-form>
    <el-dialog
      width="60%"
      title="选择地址"
      top="0"
      :visible.sync="innerVisible1"
      appendToBody
      closeOnClickModal="false"
    >
      <qqmap :chooseLocal="chooseLocal" :isshowMap="this.isshowMap" @getLocal="this.getLocal" v-if="isRouterAlive"></qqmap>
    </el-dialog>
  </div>
</template>

<script>
import qqmap from '~/components/common/qqmap.vue';

export default {
  data() {
    return {
      showMap: false,
      innerVisible1: false,
      loading: true,
      loading2: true,
      ts: this.newStore(),
      xmData: {},
      chooseLocal: {
        lat: '39.06552',
        lng: '117.11415',
      },
      localPoint: {},
      localPointname: '',
      isRouterAlive: true,
      sxSelect: [],
      sx2Select: [],
      lbSelect: [],
      qtSelect: [],
      zrSelect: [],
    };
  },
  components: {
    qqmap,
  },
  created() {
    this.getxmData();
  },
  props: ['xmid'],
  computed: {
    point() {
      const a = this.chooseLocal.lat;
      const b = this.chooseLocal.lng;
      return `${a},${b}`;
    },
  },
  methods: {
    savechangeXM() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          const req = {
            handle: '2E8E7DE13E3E62949CFDA5DB7E2B76808149E7DB5D9157A9505AD58E69C30439',
            id: this.xmid,
            pname: this.xmData.pname,
            lon: this.chooseLocal.lng,
            lat: this.chooseLocal.lat,
            nid: this.xmData.nid,
            tel: this.xmData.tel,
            pclassify: this.xmData.pclassify,
            propertyid: this.xmData.propertyid,
            pgrade: this.xmData.pgrade,
            amount: this.xmData.amount,
            source: this.xmData.source,
            orgid: this.xmData.orgid,
            assessunit: this.xmData.assessunit,
            address: this.localPoint.name,
            ptext: this.xmData.ptext,
            linkman: this.xmData.linkman,
            begindate: this.xmData.planDate[0],
            enddate: this.xmData.planDate[1],
          };
          this.$confirm('确定修改?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '修改成功!',
              });
              this.$emit('changeshowt3');
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
        } else {
          this.$message.error('内容不能为空！');
          return false;
        }
      });
    },
    getxmData() {
      this.loading2 = true;
      this.getSelect();
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680B80A9177C0749743021A445010569AEF',
        id: this.xmid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.xmData = ts.d.data.operation1[0].hash;
        this.getSX2(this.xmData.propertyid);
        this.getSX3(this.xmData.nid);
        this.xmData.planDate = [this.xmData.begindate, this.xmData.enddate];
        this.chooseLocal.lat = this.xmData.lat;
        this.chooseLocal.lng = this.xmData.lon;
        this.localPointname = `${this.xmData.address}`;
        setTimeout(() => {
          this.loading2 = false;
        }, 500);
      });
    },
    getSelect() {
      const req1 = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84BE133DA25EC7F9F14C878125FE067FE5A',
        start: '0',
        limit: '10',
      };
      const req4 = {
        handle: 'B37BA078041E48C78AD636982D7A6AC8CD3A43E9777C4E90',
        suporgid: '1',
      };
      const req5 = {
        handle: 'B37BA078041E48C78AD636982D7A6AC8CD3A43E9777C4E90',
        suporgid: '2',
      };
      this.spost(this.ts, '/mainservlet', req1).then((ts) => {
        this.sxSelect = ts.d.data.operation1;
      });
      this.spost(this.ts, '/mainservlet', req4).then((ts) => {
        this.qtSelect = ts.d.data.operation1;
      });
      this.spost(this.ts, '/mainservlet', req5).then((ts) => {
        this.zrSelect = ts.d.data.operation1;
      });
    },
    getSX2(propertyid) {
      this.nid = '';
      this.sx2Select = [];
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B768010F5656E049E8683BFF0B9210751F692',
        propertyid,
        supnclassify: '0101',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sx2Select = ts.d.data.operation1;
        this.nid = this.sx2Select[0].hash.id;
      });
    },
    getSX3(nid) {
      this.xmData.pclassify = '';
      this.lbSelect = [];
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680D1FA20266255B394E8471967064FB9C2BFF0B9210751F692',
        nid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.lbSelect = ts.d.data.operation1;
        this.xmData.pclassify = this.lbSelect[0].hash.id;
      });
    },
    getLocal(data) {
      this.localPoint = data;
      this.localPointname = `${data.name}（${data.address}）`;
      this.chooseLocal = data.latLng;
    },
    isshowMap() {
      this.reload();
      this.innerVisible1 = !this.innerVisible1;
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
  },
};
</script>

<style lang="stylus">
.el-form-item.is-required .el-form-item__label:before
  content: '*'
  color: #f56c6c
  margin-right: 4px
</style>
